<template>
  <view class="tianyancha-score">
    <text class="score">{{ result?.totalAward || '暂无匹配' }}</text>
    <button
      :disabled="!result?.show"
      class="view-btn"
      type="default"
      size="mini"
      @click="handleView"
    >
      查看补贴服务
    </button>
  </view>
</template>

<script setup lang="ts">
  import { totalAward } from '@/api/membership';
  import type { TotalAwardResult } from '@/api/membership/types';
  import { navigateTo } from '@/router';
  import { propTypes } from '@/utils/propTypes';
  import { ref, watch } from 'vue';
  import { useFormItem } from '../hooks/useContext';

  const props = defineProps({
    modelValue: propTypes.string,
  });

  const result = ref<TotalAwardResult>();

  const { getProps } = useFormItem(props);

  watch(() => getProps.value.modelValue, getScore, {
    immediate: true,
  });

  function getScore(name?: string) {
    if (name) {
      totalAward(name).then((r) => (result.value = r));
    }
  }

  function handleView() {
    result.value &&
      navigateTo({
        name: 'policyServiceReport',
        options: {
          name: getProps.value.modelValue,
        },
      });
  }
</script>

<style lang="scss" scoped>
  .tianyancha-score {
    display: flex;
    align-items: center;
    height: 100%;
    .score {
      font-size: 27rpx;
      color: #bc792b;
      flex: 1;
      text-align: center;
    }
    .view-btn {
      margin: 0;
    }
  }
</style>
